<script setup>

import {onMounted, ref} from "vue";
import {getRepairCostStatisticsApi} from "@/api/order";

const monthData = ref([]);
const quarterData = ref([]);
const loading = ref(false);

onMounted(async () => {
    const res1 = await getRepairCostStatisticsApi("MONTH");
    const res2 = await getRepairCostStatisticsApi("QUARTER");
    monthData.value = res1.data;
    quarterData.value = res2.data;
});

const goBack = () => {
    // 使用路由返回到上一个页面
    if (window.history.length > 1) {
        window.history.back();
    } else {
        // 如果没有历史记录，跳转到主页或其他默认页面
        window.location.href = '/';
    }
};
</script>

<template>
<el-container>
    <el-header class="header">
        <h1>成本分析</h1>
        <el-button type="danger" size="small" @click="goBack">返回</el-button>
    </el-header>
    <el-main>
        <el-skeleton :loading="loading" animated>
            <h2>按月份统计维修费用构成</h2>
            <el-table :data="monthData" style="margin-bottom: 20px">
                <el-table-column prop="period" label="月份" class="custom-row" />
                <el-table-column prop="total_hourly_cost" label="总工时费用" class="custom-row" />
                <el-table-column prop="total_material_cost" label="总材料费用" class="custom-row" />
                <el-table-column prop="hourly_cost_ratio" label="工时费用占比 (%)" class="custom-row" />
                <el-table-column prop="material_cost_ratio" label="材料费用占比 (%)" class="custom-row" />
            </el-table>

            <h2>按季度统计维修费用构成</h2>
            <el-table :data="quarterData">
                <el-table-column prop="period" label="季度" class="custom-row" />
                <el-table-column prop="total_hourly_cost" label="总工时费用" class="custom-row" />
                <el-table-column prop="total_material_cost" label="总材料费用" class="custom-row" />
                <el-table-column prop="hourly_cost_ratio" label="工时费用占比 (%)" class="custom-row" />
                <el-table-column prop="material_cost_ratio" label="材料费用占比 (%)" class="custom-row" />
            </el-table>
        </el-skeleton>
    </el-main>
</el-container>
</template>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.custom-row {
    text-align: center;
    width:300px;
}
</style>